<template>
  <grid-layout :layout="layout" :gutter="0">
    <template #left>
      <div
        v-for="item in videoList"
        :key="item.id"
        class="list-item"
        :class="{ active: activeId === item.id }"
        @click="click(item)"
      >
        <div>{{ item.name }}</div>
      </div>
    </template>
    <template #right>
      <live-video style="position: absolute; top: 0; right: 0; width: 100%; height: 100%" :data="videoData" />
    </template>
  </grid-layout>
</template>

<script>
import { plentyEngineeringDetail, plentyEngineeringList } from '@gis/lib/api';
import { handleCommonResult } from '@gis/lib/utils/resolver.js';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import LiveVideo from '@gis/lib/components/player/index.jsx';
import isEmpty from 'lodash-es/isEmpty.js';

export default {
  name: 'video-list',
  mixins: [areaCodeMixin],
  props: {
    details: { type: Object, default: () => ({}) }, //默认选中监控
  },
  components: { LiveVideo, GridLayout },
  data() {
    return {
      activeId: '',
      videoList: [],
      videoData: {},
      layout: [
        { name: 'left', colSpan: 6 },
        { name: 'right', colSpan: 18 },
      ],
    };
  },
  methods: {
    async click(data = {}) {
      this.activeId = data.id || data.monitor_id;
      const res = handleCommonResult(
        await plentyEngineeringDetail({
          monitor_id: this.activeId,
        })
      );
      this.videoData = Object.assign({}, data, res);
      this.$emit('videoChange', this.videoData);
    },
    async getDataAsync() {
      const params = Object.assign({}, this.apiParams, { page_size: 999 });
      const data = handleCommonResult(await plentyEngineeringList(params));
      this.videoList = data.list || [];
      if (!isEmpty(this.details)) {
        await this.click(this.details);
        return;
      }
      if (this.videoList.length) {
        await this.click(this.videoList[0]);
      }
    },
  },
};
</script>

<style scoped lang="less">
.list-item {
  padding: 0 20px;
  font-size: 14px;
  cursor: pointer;
  line-height: 32px;
  &.active {
    background: url('./assets/menu_pic_check_t.png') center center no-repeat;
    background-size: 100% 100%;
  }
}
</style>
